<template>
  <div>
    <my-head title="找回密码">
      <template #left>
        <div class="back" @click="gotoback">
          <van-icon name="revoke" size="18" color="#ff5f16" />
        </div>
      </template>
    </my-head>
    <van-form @submit="onSubmit" @failed="onFailed" class="form">
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号"
        left-icon="phone-o"
        clearable
        placeholder="手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: reg.phone, message: '请输入正确的手机号' },
        ]"
      >
      </van-field>

      <van-field
        v-model="form.captcha"
        left-icon="qr"
        name="captcha"
        clearable
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请输入验证码' },
          { pattern: reg.code, message: '请输入四位数字验证码' },
        ]"
      >
        <template #button>
          <van-button
            v-if="toggle"
            @click="startSend"
            :disabled="disabled"
            size="small"
            type="primary"
            >发送验证码</van-button
          >
          <van-button v-else disabled size="small" type="default"
            >等待 {{ count }} S</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="form.password"
        :type="type"
        name="password"
        clearable
        left-icon="warn-o"
        label="重置密码"
        placeholder="重置密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: reg.pwd, message: '请填写6-16位数字字母组合' },
        ]"
        :right-icon="type != 'password' ? 'eye-o' : 'closed-eye'"
        @click-right-icon="changeType"
      />
      <div style="margin: 16px 0" class="links">
        <router-link :to="{ name: 'register' }" class="aitem color1"
          >没有账号,请注册</router-link
        >
        <router-link :to="{ name: 'login' }" class="aitem color2"
          >登录</router-link
        >
      </div>
      <div style="margin: 16px 0">
        <van-button block type="primary" native-type="submit"
          >确定找回</van-button
        >
        <van-button class="mt20" block type="danger" native-type="reset"
          >重置</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      toggle: true,
      count: 180,
      type: "password",
    };
  },
  methods: {
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    async onSubmit(value) {
      // 修改密码
      let res = await this.$ajax.findUser({
        phone: value.phone,
      });
      if (res.length > 0) {
        // 校验验证码
        let result = await this.$ajax.verifyCaptcha({
          phone: value.phone,
          captcha: value.captcha,
        });
        console.log(result);
        if (result.code == 200) {
          // 真正修改密码
          this.$ajax
            .changepass(res[0].id, {
              password: value.password,
            })
            .then((res) => {
              this.ShowSuccess("密码找回成功");
              this.changeUserInfo(null);
              this.$router.push({ name: "login" });
            });
        }
      } else {
        this.showFailMsg("手机号未注册,请先注册");
      }
    },
    onFailed() {
      this.showFailMsg("请输入有效的数据信息");
    },
    startSend() {
      // 防抖
      this.timeDown();
      // 发送验证码
      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.ShowSuccess("发送成功");
          }
        });
    },
    timeDown() {
      this.toggle = false;
      this.count--;
      var timer = setInterval(() => {
        if (this.count > 0) {
          this.toggle = false;
          this.count--;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.count = 180;
        }
      }, 1000);
    },
  },
  computed: {
    disabled() {
      return !this.reg.phone.test(this.form.phone);
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  padding: 14px;
  .mt20 {
    margin-top: 14px;
  }
}
</style>